<template>
  <div class="personal-info-container">
    <div class="content-m">
      <div class="avatar-section">
        <img :src="`${this.baseUrl}/file/getPortrait/${user.username}`" alt="头像" class="avatar"
          @click="showAvatarUpload = true">
        <input type="file" ref="avatarInput" style="display: none" @change="handleAvatarUpload">
      </div>
      <!-- 信息展示区域 -->
      <div class="info-section">
        <div class="info-item">
          <span class="label">账号：</span>
          <span class="value">{{ user.username }}</span>
        </div>
        <div class="info-item">
          <span class="label">昵称：</span>
          <span class="value">{{ user.petName }}</span>

        </div>

        <div class="info-item">
          <span class="label">邮箱：</span>
          <span class="value">{{ user.email }}</span>

        </div>
        <div class="info-item">
          <span class="label">电话：</span>
          <a href="tel:18593041116">点击拨打 1234567890</a>>
          <span class="value">{{ user.phone }}</span>

        </div>
        <div class="info-item">
          <span class="label">性别：</span>
          <span class="value">{{ user.gender }}</span>

        </div>
        <div class="info-item">
          <span class="label">年龄：</span>
          <span class="value">{{ user.age }}</span>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {
  onResume,
  onPause,
  onBackKeyDown,
  onMenuKeyDown,
  onSearchKeyDown,
  onVolumeDownKeyDown,
  onVolumeUpKeyDown,
  onKeyDown,
} from "tauri-plugin-app-events-api";
import settings from '../settings.json'
import emitter from '../bus/index.js'
import axios from 'axios'
import { exit, relaunch } from '@tauri-apps/plugin-process';
import { setStatusBarColor } from "tauri-plugin-status-bar-color-api";
import { window } from "@tauri-apps/api";

export default {
  data() {
    return {
      baseUrl: '',
      nickname: '示例昵称',
      account: 'example_account',
      email: 'example@example.com',
      phone: '1234567890',
      gender: '男',
      age: 25,
      address: '示例地址',
      showAvatarUpload: false,
      isShowChild: 0,
      user: null
    };
  },
  created() {
    // setStatusBarColor("#ecfae5")
    onBackKeyDown(() => {
      // await exit(0)
      window.minimize()
      this.$router.push("/tutor/issuet")
      return false;
    });
    let username = this.$route.query.username
    // alert(username)
    this.baseUrl = settings.ipAddress
    axios.get(`${this.baseUrl}/user/searchUser/` + username)
      .then(res => {
        this.user = res.data
        console.log(res.data)
        // console.log("-----user----")
        // console.log(this.user)
        // alert(JSON.stringify(this.user))
        emitter.emit('showUser', 0)
      })

  },
  methods: {

    // 处理头像上传选择文件
    handleAvatarUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.avatarUrl = URL.createObjectURL(file);
      }
    },
    // 确认上传头像（实际应用需完善）
    confirmAvatarUpload() {
      this.showAvatarUpload = false;
    },
    // 取消上传头像
    cancelAvatarUpload() {
      this.showAvatarUpload = false;
      this.$refs.avatarInput.value = null;
    },
    go_page(r) {
      this.isShowChild = 1
      this.$router.push(r)
    }
  }
};
</script>

<style lang="scss" scoped>
/* 定义动画关键帧 */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 过渡动画类 */
.slide-in-left-enter-active {
  animation: slideInLeft 0.5s ease-out;
}

/* 过渡动画开始时的样式 */
.slide-in-left-enter {
  transform: translateX(-100%);
  opacity: 0;
}

.slide-content {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}

// 整体容器样式，设置背景色、内边距、圆角、宽度及水平居中
.personal-info-container {

  // background-color: #ffffff; // 清新绿色
  // padding: 1rem;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: fixed;

  // 头像区域样式，头像居中，设置尺寸、圆角及点击效果
  .content-m {
    background-color: #ffffff;
    position: fixed;
    top: 0px;
    width: 100vw;
    height: calc(100vh);
    border-radius: 0px 0px 0 0;

    .avatar-section {
      margin-top: 6vh;
      text-align: center;
      margin-bottom: 1rem;

      .avatar {
        width: 8rem;
        height: 8rem;
        border-radius: 50%;
        object-fit: cover;
        cursor: pointer;
      }
    }

    // 信息展示区域样式，使用flex布局，信息项排列并添加底部边框
    .info-section {
      display: flex;
      flex-direction: column;

      .info-item {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 0.8rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #aed581; // 较浅的绿色分割线

        .label {
          margin-left: 5vw;
          font-weight: bold;
          font-size: 0.9rem;
        }

        .value {
          margin-left: 5vw;
          font-size: 0.9rem;
        }

        img {
          width: 1.5rem;
          height: 1.5rem;
          position: absolute;
          right: 1rem;
        }
      }
    }
  }

  // 头像上传模态框样式，固定定位铺满屏幕，内容居中显示
  .avatar-upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    .modal-content {
      background-color: white;
      padding: 1.5rem;
      border-radius: 6px;
      text-align: center;
      width: 80%;
      max-width: 300px;

      button {
        margin-top: 1rem;
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        background-color: #c5e1a5;
        color: white;
        font-size: 0.9rem;

        &:hover {
          background-color: #aed581;
        }
      }
    }
  }
}
</style>